<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../three.min.js"></script>
    <script src="../Stats.js" data-ke-src="../Stats.js"></script>
    <script src="../OBJLoader.js"></script>
    <script src="../MTLLoader.js"></script>
</head>
<body>
    <script>
        function readMTL(path) {
            return new Promise(function(resolve) {
                let mtlLoader = new THREE.MTLLoader();
                mtlLoader.load(path,
                    function(data) {
                        resolve(data)
                    }
                )
            })
        }
        function readObj(path,materials=null) {
            let objLoader = new THREE.OBJLoader()
            if(materials!=null) {
                objLoader.setMaterials(materials)
            }
            return new Promise(function(resolve) {
                objLoader.load(path,
                    function(data) {
                        resolve(data)
                    })
            })
        }
        const width = window.innerWidth
        const height = window.innerHeight
        var obj = undefined;
        var renderer = new THREE.WebGLRenderer()
        renderer.setSize(width,height)
        document.body.appendChild(renderer.domElement)

        var scene = new THREE.Scene()

        var camera = new THREE.PerspectiveCamera(80,width/height,1,10000)
        camera.position.set(500,1000,1000)
        camera.lookAt(scene.position)

        var light = new THREE.DirectionalLight(0xffffff)
        light.position.set(1,1,1)
        scene.add(light)

        var gride = new THREE.GridHelper(6000,50,"blue",0xeeeeee)
        scene.add(gride)

        readMTL('mode/weixing/file.mtl').then(materials=>{
            materials.preload();
            return readObj('mode/weixing/file.obj',materials)
        }).then(object=>{
            scene.add( object );
        })
        function animation() {
            requestAnimationFrame(animation)
            if(obj!=undefined) {
                
            }
            
            renderer.render(scene,camera)
        }
        animation()
    </script>
</body>
</html>